<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true" :model="classBo" class="demo-form-inline">
        <el-form-item label="班级名" label-width="70px">
          <el-input
            clearable
            v-model="classBo.cName"
            placeholder="请输入班级名"
          ></el-input>
        </el-form-item>
        <el-form-item label="班级编号" label-width="70px">
          <el-input
            clearable
            v-model="classBo.cName"
            placeholder="请输入班级编号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" plain @click="resetclassBo"
            >重置</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-search"
            plain
            @click="getclassList"
            >查询</el-button
          >
          <el-button
            type="success"
            icon="el-icon-plus"
            plain
            @click="show('新增课程')"
            >新增</el-button
          >
        </el-form-item>
        <el-dropdown
          class="el-dropdown"
          :hide-on-click="false"
          @command="handleCommand"
        >
          <span class="el-dropdown-link">
            <i class="el-icon-more"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item style="color: #f56c6c" command="del"
              >删除</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </el-form>
      <el-table
        :data="classList"
        tooltip-effect="dark"
        style="width: 100%"
        height="500px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column type="index" label="#"> </el-table-column>
        <el-table-column prop="classNo" label="班级编号"> </el-table-column>
        <el-table-column prop="className" label="班级名"> </el-table-column>
        <el-table-column prop="name" label="辅导员"> </el-table-column>
        <el-table-column prop="majorName" label="专业"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="show('修改', scope.row.id)"
            >
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="padding-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 30, 50, 100]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- <ClazzAdd
      :addOrUpdateVisible="addOrUpdateVisible"
      @changeShow="showAddOrUpdate"
      ref="addOrUpdateRef"
      :title="title"
      :tag="tag"
      :subData="subData"
      :options="options"
    ></ClazzAdd> -->
  </div>
</template>

<script>
import { getClazzList } from "../../../api/class";
export default {
  name: "Class",
  data() {
    return {
      ctypeOptions: [
        {
          value: "0",
          label: "必修",
        },
        {
          value: "1",
          label: "选修",
        },
      ],
      classBo: {
        id: "",
        classNo: "",
        className: "",
        name: "",
        majorName: "",
      },
      multipleSelection: [],
      currentPage: 1,
      size: 10,
      total: 100,
      classList: [],
      // 控制新增编辑弹窗的显示与隐藏
      addOrUpdateVisible: false,
      title: "",
      subData: {
        id: null,
        classNo: "",
        className: "",
        name: "0",
        majorName: "",
      },
      options: [],
      tag: 1,
    };
  },
  //   components: {
  //     classAdd,
  //   },
  created() {
    this.getClazzList();
  },
  methods: {
    // 多选框
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
      console.log(this.multipleSelection);
    },
    // 调整分页size
    handleSizeChange(val) {
      this.size = val;
      this.getClazzList();
    },
    // 跳转其他页
    handleCurrentChange(val) {
      console.log(val);
      this.currentPage = val;
      this.getClazzList();
    },
    // 重置查询
    resetClassBo() {
      this.ClassBo.cName = "";
      this.ClassBo.cType = "";
      this.getClazzList();
    },
    // 异步请求用户列表数据
    async getClazzList() {
      const { data } = await getClazzList(
        this.currentPage,
        this.size,
        this.classBo
      );
      if (data.code === "2000") {
        this.classList = data.data.list;
        this.total = data.data.total;
      } else {
        this.$message({
          message: data.msg,
          type: "error",
        });
      }
    },
    // 按钮点击事件 显示新增编辑弹窗组件
    show(title, id) {
      this.roles = [];
      this.title = title;
      if (title === "新增") {
        this.tag = 1;
      } else {
        this.tag = 0;
        this.queryUserInfo(id);
      }
      this.getRole();
      this.addOrUpdateVisible = true;
    },
    // 监听 子组件弹窗关闭后触发，有子组件调用
    showAddOrUpdate(data) {
      this.addOrUpdateVisible = data !== "false";
      this.getclassList();
    },
    async queryUserInfo(id) {
      const { data } = await queryUserInfo(id);
      this.subData = data.data;
      let temp = [];
      for (let i of this.subData.roles.split(",")) {
        temp.push(Number(i));
      }
      this.subData.roles = temp;
    },
    handleCommand(command) {
      if (command === "del") {
        this.multiDel();
      } else {
        this.multiChangeStatus();
      }
    },
    multiDel() {
      if (this.multipleSelection.length < 1) {
        this.$message({
          message: "请先勾选删除的用户",
          type: "warning",
        });
        return;
      }
      this.$confirm("此操作将永久删除用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let idArray = [];
        for (let i of this.multipleSelection) {
          idArray.push(i.id);
        }
        multiDelUser(idArray).then((data) => {
          if (data.data.code === "2000") {
            this.$message({
              message: data.data.msg,
              type: "success",
            });
          } else {
            this.$message({
              message: data.data.msg,
              type: "error",
            });
          }
          this.getclassList();
        });
      });
    },
    multiChangeStatus() {
      if (this.multipleSelection.length < 1) {
        this.$message({
          message: "请先勾选要改变状态的用户",
          type: "warning",
        });
        return;
      }
      this.$confirm("此操作将改变用户状态, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let idMap = [];
        for (let i of this.multipleSelection) {
          let sysUser = {};
          sysUser.id = i.id;
          sysUser.status = i.status;
          idMap.push(sysUser);
        }
        multiChangeUsrStatus(idMap).then((data) => {
          if (data.data.code === "2000") {
            this.$message({
              message: data.data.msg,
              type: "success",
            });
          } else {
            this.$message({
              message: data.data.msg,
              type: "error",
            });
          }
          this.getclassList();
        });
      });
    },
    async getRole() {
      const { data } = await getRole();
      this.options = data.data;
    },
  },
};
</script>

<style lang="less" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.el-dropdown {
  float: right;
  padding-right: 20px;
}
</style>
